<template>
	<view class="main"
		:style="{ '--height': safeArea ? `${safeAreaInsets?.bottom}px` : 0 ,'background' :isDark ? '#1D1D1F' : isBg ,'color' : isDark ? '#7E8286' : '#000' , }"
		@click.stop="() => {return false}">
		<view class="header" :style="{'background' :total ? 'rgb(228,228,228)' : '#fff' ,'color' : isDark ? '#7E8286' : '#000' , 'fontSize' : inSide ? '25px' : '28rpx' , 'marginTop' : inSide ? '10px' : '',
				'display' : total ? '' : 'block',
				'height' : total ? '1.5rem' : '2rem'
			}">
			<view class=" line" v-if="total"></view>
			<view :class=" !total ? 'title' : 'title pageTitle'"
				:style="{'background' :total ? 'rgb(228,228,228)' : '#fff' }" style="font-size: 30rpx;">
				{{ title }}

			</view>
		</view>
		<!-- 	<view :class="isAll ? 'balance all_balance_lock' : 'balance'" v-if="unlock && mode != 1 && !total || isAll"
			:style="{'margin-top':'20px'}"> -->
		<view :class="isAll ? 'balance all_balance_lock' : 'balance'" style="margin-top:10px;margin-left:10px;">
			<view :class=" !isAll ? 'balance_box all_balance' : 'balance_box'">
				<view class="txt">
					<text>账户余额：</text>
					<text>{{ userInfo?.money || money }}书币</text>
				</view>
			</view>
			<!--  #ifdef  MP-WEIXIN -->

			<!--  #endif -->
		</view>

		<view :class="isAll ? 'balance all_balance_lock' : 'balance'" v-if="0"
			style="margin-top:10px;margin-left:10px;">
			<view :class=" !isAll ? 'balance_box all_balance' : 'balance_box'">
				<view class="txt">
					<text>账户余额：</text>
					<text>{{ userInfo?.money || money }}书币</text>
				</view>

				<view class="txt">
					<text>解锁本章：</text>
					<text>{{ expend }}书币</text>
				</view>
			</view>
			<!-- <view v-if="isAll" class="all_balance_btn" @click="allPay">
				全本解锁
			</view> -->
			<!--  #ifdef  MP-WEIXIN -->
			<view class="balance_btn" @click="payBook">支付书币解锁
			</view>
			<!--  #endif -->
		</view>

		<view class="list">
			<view class="col" v-for="item in list" :key="item.id" :class="{vip: item.id == recharge_id}">

				<view class="item" @click.stop="pay(item)" :class="{ active: item.id == recharge_id }">

					<view v-if="item.type == 10 && item.id == recharge_id" class="vip_bg">
						V<text>IP</text>
					</view>

					<view class="tag" v-if="item.tag">
						<text class="txt">{{item.tag}}</text>
					</view>

					<view class="amount" :style="{'color' : isDark ? '#7E8286' : '#000' ,}">
						<!-- <text class="unit">￥</text> -->
						<text class="num">{{ item.recharge_price }}</text>
						<text class="add">{{item.name}}</text>

					</view>

					<view class="desc" :style="{'color' : isDark ? '#7E8286' : '#000'}">{{ item.send_title }}</view>

					<view class="member">
						<text>{{ item.label_left }}</text>
						<text>{{item.label_right}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="member" @click.stop="gopay()"
			style="display: flex; justify-content: center; align-items: center; height: 45px; margin: 1vh 7vw; font-size: 40rpx; letter-spacing: 0.2em; text-align: center; color: #ffffff; background-color: #fd7529; 
  color: #ffffff;
  border: none; 
  border-radius: 5rpx; 
  padding: 10rpx 20rpx; 
  box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.3); padding: 5rpx; border-radius: 16rpx; transition: all 0.4s;font-weight:bold">
			确认充值

		</view>
		<view
			style="display: flex; flex-direction: column; align-items: flex-start; font-size: 26rpx; color: #ad9b9b; padding: 9rpx 52rpx;">
			<view style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
				<text>温馨提示：</text>
				<view style="display: flex; align-items: center;" v-if="expend">
					<text @click="toggleMore" style="cursor: pointer;">更多</text> <!-- 将“更多”文本变为可点击的 -->
					<uni-icons type="down" size="14" @click.stop="toggleMore" style="margin-left: auto;"
						v-if="!showMore" />
					<!-- 注意：使用了.stop修饰符来阻止事件冒泡到父级view -->
				</view>
			</view>
			<view style="margin-top: 10rpx;">
				<view>1，书币乃虚拟物品，一旦充值成功，概不退换。（1元=100书币）</view>
				<view>2，充值获得的书币可在本站购买任意书籍。</view>
				<view>3，不具有完全民事行为能力的用户(包括未满18周岁及其他法定情形)应在法定监护人的陪同下进行付费充值、付费阅读等相关操作。一切在平台上的操作将视为获得法定监护人同意，并由监护人一并承担相关法律责任。</view>
				<view v-if="showMore">{{moreContent}}</view>
			</view>
		</view>

		<view class="tips" :class="{ hide: show }" v-if='total' @click="open">付费须知 >></view>
		<view class="footer" :class="{ show }" v-if="!total">
			<view class="tit">充值说明</view>

			<view class="desc">
				<view class="txt" v-for="(desc, index) in descs" :key="index">{{ desc }}</view>
			</view>
		</view>

		<uni-popup ref="popup" :mask-click="true">
			<view class="popup_box">
				<view class="title">
					<text>付费须知</text>
					<uni-icons type="closeempty" size="25" @click="close"></uni-icons>
				</view>
				<view class="desc">
					<view class="txt" v-for="(desc, index) in descs" :key="index">{{ desc }}</view>
				</view>
			</view>
		</uni-popup>




	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'
	import { useUserStore } from '@/stores/user'
	import { useNovelStore } from '@/stores/novel'
	import { getRechargeList } from '@/api/index'
	import { RechargeItem } from '@/types/index'
	import { GetRechargeListParam } from '@/types/api'
	import { toast } from '@/utils/index'

	const popup = ref(null)
	const systemStore = useSystemStore()
	const { safeAreaInsets } = storeToRefs(systemStore)
	const showMore = ref<number>(0)


	interface Props {
		title ?: string
		safeArea : boolean
		unlock ?: boolean
		js ?: boolean
		isBg ?: string
		inSide ?: boolean
		isDark ?: boolean
		showMember ?: any
		total ?: boolean
		isAll ?: number
	}

	const props = withDefaults(defineProps<Props>(), {
		safeArea: true,
		unlock: false,
		isBg: '#ffffff',
		inSide: false,
		isDark: false,
		showMember: null,
		total: false,
		isAll: 0
	})

	const emit = defineEmits([
		'pay',
		'showMenber'
		// #ifdef MP-WEIXIN
		, 'payBook'
		// #endif
		, 'payAllBook',
		'close',
		'change'
	])

	const novelStore = useNovelStore()

	const userStore = useUserStore()
	const { loginInfo, userInfo } = storeToRefs(userStore)

	const descs = ref<string[]>([])
	const list = ref<RechargeItem[]>([])
	const expend = ref<number>(0)
	const mode = ref<number>(0)
	const money = ref<number>(0)
	const allMoney = ref<number>(0)

	const moreContent = ref<string>('4，本章是收费章节，当前章节价格0书币解锁。')

	const recharge_id = ref<number>(-1)
	const recharge_type = ref<number>(0)

	//全书解锁
	const allPay = async () => {
		console.log(userInfo.value);
		if (userInfo.value.money >= allMoney.value) {
			emit('payAllBook', {
				book_id: novelStore.book_id,
				ChapterIndex: novelStore.chapterIndex
			})
		} else {
			pay({ type: 3, id: 0 });
		}
	}




	//获取充值列表
	const _getRechargeList = async () => {

		const param : GetRechargeListParam = {
			app_id: loginInfo.value.app_id
		}
		try {
			if (props.unlock) {
				// #ifdef MP-WEIXIN
				param.book_id = novelStore.book_id
				param.novel_id = novelStore.novel_id
				// #endif

				// #ifndef MP-WEIXIN
				param.novel_id = novelStore.novel_id
				// #endif
				param.ChapterIndex = novelStore.chapterIndex
			}

			const res = await getRechargeList(param) || {}
			const systemInfo = uni.getSystemInfoSync()
			if (res.ios_pay_switch == 0 && systemInfo.osName === 'ios') {
				toast('【由于相关规范，iOS功能暂不可用】')
			} else {
				console.log(res.user.money)
				moreContent.value = '4，本章是收费章节，当前章节价格' + res.expend + '书币解锁。'
				console.log(moreContent)
				descs.value = res.Rechargeinfo || []
				list.value = res.Rechargetemplist || []
				expend.value = res.expend || 0
				mode.value = res.mode || 0
				money.value = res.user.money || 0
				allMoney.value = res.money
				userInfo.value.money = res.user.money || 0
				recharge_id.value = (list.value.find(item => item.checked) || list.value[0] || {}).id
			}
		} catch (e) {
			//TODO handle the exception
		}
	}

	let showTips

	// #ifdef MP-WEIXIN
	showTips = false
	// #endif

	// #ifndef MP-WEIXIN
	showTips = ref(true)
	// #endif

	const show = ref(showTips)

	//支付
	const pay = (item) => {

		recharge_id.value = item.id
		recharge_type.value = item.type

		console.log(recharge_id.value)
	}
	const gopay = () => {

		// #ifdef MP-WEIXIN
		emit('pay', {
			app_id: loginInfo.value.app_id,
			book_id: novelStore.book_id,
			Rechargetemp_id: recharge_id.value,
			type: recharge_type.value
		})
		// #endif

		// #ifndef MP-WEIXIN

		emit('pay', {
			app_id: loginInfo.value.app_id,
			novel_id: novelStore.novel_id,
			Rechargetemp_id: recharge_id.value,
			type: recharge_type.value
		})
		// #endif

	}
	// #ifdef MP-WEIXIN
	//书币支付
	const payBook = () => {
		emit('payBook', {
			book_id: novelStore.book_id,
			ChapterIndex: novelStore.chapterIndex
		})
	}
	// #endif

	_getRechargeList();
	const open = () => {
		popup.value.open('center')
	}
	const toggleMore = () => {
		console.log('显示更多')
		if (showMore.value == 0) {
			showMore.value = 1
		} else {
			showMore.value = 0
		}
		console.log(showMore.value)
	}
</script>

<style scoped lang="scss">
	.main {
		position: relative;
		padding-bottom: var(--height);
		background: #fff;
		z-index: 3;
		width: 100%;
		overflow: hidden;

		.header {
			height: 1.5rem;
			overflow: hidden;
			/*  #ifdef  MP-WEIXIN  */
			font-size: 24rpx;
			/* #endif  */

			/*  #ifndef  MP-WEIXIN  */
			font-size: 28rpx;
			/* #endif  */

			line-height: 88rpx;
			color: #333;
			// background: #f7f5f5;
			@include center(flex);
			// display: block !important;
			position: relative;

			.line {
				margin-right: 12rpx;
				@include size(80rpx, 2rpx);
				background: #333;
				position: absolute;
				width: 100%;
			}

			.title {
				// width: 100%;
				margin-left: 15px;
				;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				z-index: 3;
				letter-spacing: 0px;
			}

			.pageTitle {
				font-size: 0.7rem;
			}

		}

		.txt_tips {
			padding: 0 30rpx;
			/* #ifdef MP-KUAISHOU */
			padding-top: 10rpx;
			margin-top: 1rem;
			/* #endif */
			display: flex;
			justify-content: space-between;
			color: #a79c9c;
		}

		.all_balance_lock {
			// display: flex;
			justify-content: space-between;
		}

		.balance {
			padding: 0rpx 30rpx 20rpx;

			/*  #ifdef  MP-WEIXIN  */
			@include flex($align: center);
			/* #endif  */

			.balance_box {
				/*  #ifdef  MP-WEIXIN  */
				flex: 1;
				/* #endif  */

				/*  #ifndef  MP-WEIXIN  */
				@include flex(space-between, center);
				/* #endif  */

				.txt {
					@include tx(26rpx);
					color: #a79c9c;

					/*  #ifdef  MP-WEIXIN  */
					&+.txt {
						margin-top: 20rpx;
					}

					/* #endif  */
				}
			}

			/*  #ifdef  MP-WEIXIN  */
			.balance_btn {
				margin-left: 20rpx;
				padding: 20rpx 30rpx;
				@include tx(28rpx);
				color: #fff;
				border-radius: 34rpx;
				background: #ec7676;
			}

			/* #endif  */
			.all_balance {
				display: flex;
				justify-content: space-between !important;
				align-items: flex-start !important;
				align-content: center !important;
				flex-direction: column !important;
			}

			.all_balance_btn {
				margin-left: 20rpx;
				padding: 20rpx 30rpx;
				@include tx(28rpx);
				color: #fff;
				border-radius: 34rpx;
				background: #fd7529;
			}
		}


		/*  #ifdef  MP-WEIXIN  */
		.list {
			margin: 0 -10rpx;
			margin-top: 10px;
			padding: 0 10rpx 10rpx 10rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			.vip {

				.item {
					background-image: linear-gradient(to right top,
							rgb(254, 212, 140),
							rgb(250, 227, 195));
					height: 100%;
					position: relative;

					.vip_bg {
						margin-right: -15px;
						position: absolute;
						color: #fff;
						font-size: 2rem;
						z-index: 1;
						right: 13%;
						top: 0.2rem;
						font-style: italic;

						text {
							font-size: 1.5rem;
						}
					}

					.tag {
						background: rgb(104, 82, 61) !important;
						color: #fff !important;
					}
				}
			}

			.col {
				//	margin-top: 0.3rem;
				padding: 4rpx 12rpx;
				width: 45%;
				box-sizing: border-box;

				.item {
					position: relative;
					border-radius: 16rpx;
					height: 90%;
					/*  #ifdef  MP-WEIXIN  */
					background: #ffffff;
					/* #endif  */


					border: 1px solid #cecbc8;



					&.active {
						// border-color: #f99403;
						background: #fbedc5;
						border: 1px solid #f44336;

						.amount {
							color: #F56B24;
						}

						// .member {
						// 	background: #FC9E18;
						// }
					}



					.tag {
						position: absolute;
						@include size(74rpx, 40rpx);
						@include tx(28rpx, 40rpx);
						font-style: italic;
						border-radius: 20rpx 0;
						background: linear-gradient(to right top,
								rgb(254, 212, 140),
								rgb(250, 227, 195));
						color: rgb(136, 99, 55);
						padding-right: 5px;
						/*  #ifdef  MP-WEIXIN  */
						top: -0.6rem;
						right: -0.6rem;

						/* #endif  */

						/*  #ifndef  MP-WEIXIN  */
						top: -0.6rem;
						right: -0.6rem;
						// background: #626061;
						/* #endif  */

						.txt {
							margin-left: 12rpx;
							transform: translateX(-4rpx);
						}
					}

					.amount {
						margin-left: 20rpx;
						padding-top: 20rpx;
						color: #000000;
						display: flex;
						align-items: center;
						height: 1.3rem;
						z-index: 2;

						.unit {
							@include tx(24rpx);
						}

						.num {
							/*  #ifdef  MP-WEIXIN  */

							@include tx(37rpx);
							/* #endif  */
							/*  #ifndef  MP-WEIXIN  */
							@include tx(35rpx);
							/* #endif  */
							margin-top: 5px;
							margin-left: 5px;
							font-weight: bold;
							// width: 2.5rem;
						}

						.add {
							display: block;
							border-radius: 30px;
							background-color: rgb(253, 117, 41);
							/*  #ifdef  MP-WEIXIN  */

							font-size: 12px;
							/* #endif  */
							/*  #ifndef  MP-WEIXIN  */
							font-size: 15px;
							/* #endif  */

							color: #fff;
							text-align: center;
							padding: 0 5px;
							margin-left: 10px;
							margin-top: 5px;
							line-height: 24px;
							z-index: 5;
						}
					}

					.desc {
						margin-left: 25rpx;
						margin-top: 20rpx;

						/*  #ifdef  MP-WEIXIN  */

						@include tx(27rpx);
						/* #endif  */
						/*  #ifndef  MP-WEIXIN  */
						@include tx(28rpx);
						/* #endif  */
						color: #373737;
						z-index: 2;
						position: relative;
					}

					.member {
						margin-top: 30rpx;
						padding: 0 25rpx;
						@include tx(24rpx, 45rpx);
						color: rgb(234, 48, 53);
						font-weight: bold;
						text-align: left;
						height: 1rem;
						/*  #ifdef  MP-WEIXIN  */
						// background: #ec7676;
						border-radius: 0 0 16rpx 16rpx;
						/* #endif  */
						/*  #ifndef  MP-WEIXIN  */
						// background: #c7bbbb;
						/* #endif  */
						display: flex;
						justify-content: space-between;

						text {


							/*  #ifdef  MP-WEIXIN  */

							margin-top: -30rpx;
							color: #FF1E06;
							/* #endif  */
							/*  #ifndef  MP-WEIXIN  */
							color: rgb(219, 91, 43);
							/* #endif  */
						}
					}
				}
			}
		}

		/* #endif  */

		/*  #ifndef  MP-WEIXIN  */
		.list {
			margin: 0 -10rpx;
			padding: 0 30rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.vip {

				.item {
					background-image: linear-gradient(to right top,
							rgb(254, 212, 140),
							rgb(250, 227, 195));
					height: 100%;
					position: relative;

					.vip_bg {
						position: absolute;
						color: #fff;
						font-size: 2rem;
						z-index: 1;
						right: 13%;
						top: 0.2rem;
						font-style: italic;

						text {
							font-size: 1.5rem;
						}
					}

					.tag {
						background: rgb(104, 82, 61) !important;
						color: #fff !important;
					}
				}
			}

			.col {
				margin-top: 0.7rem;
				padding: 6rpx 15rpx;
				width: 49%;
				box-sizing: border-box;

				.item {
					position: relative;
					border-radius: 16rpx;
					height: 100%;
					/*  #ifdef  MP-WEIXIN  */
					background: #f9eeef;
					/* #endif  */

					/*  #ifndef  MP-WEIXIN  */
					border: 1px solid #b9b1a6;
					/* #endif  */

					/*  #ifndef  MP-WEIXIN  */
					&.active {
						// border-color: #f99403;


						.amount {
							color: #F56B24;
						}

						// .member {
						// 	background: #FC9E18;
						// }
					}

					/* #endif  */

					.tag {
						position: absolute;
						@include size(74rpx, 40rpx);
						@include tx(28rpx, 40rpx);
						font-style: italic;
						border-radius: 20rpx 0;
						background: linear-gradient(to right top,
								rgb(254, 212, 140),
								rgb(250, 227, 195));
						color: rgb(136, 99, 55);
						padding-right: 5px;
						/*  #ifdef  MP-WEIXIN  */
						top: -0.6rem;
						right: -0.6rem;

						/* #endif  */

						/*  #ifndef  MP-WEIXIN  */
						top: -0.6rem;
						right: -0.6rem;
						// background: #626061;
						/* #endif  */

						.txt {
							margin-left: 12rpx;
							transform: translateX(-4rpx);
						}
					}

					.amount {
						margin-left: 20rpx;
						padding-top: 32rpx;
						color: #000000;
						display: flex;
						align-items: center;
						height: 1.3rem;
						z-index: 2;

						.unit {
							@include tx(24rpx);
						}

						.num {
							@include tx(35rpx);
							font-weight: bold;
							// width: 2.5rem;
						}

						.add {
							display: block;
							border-radius: 30px;
							background-color: rgb(253, 117, 41);
							font-size: 15px;
							color: #fff;
							text-align: center;
							padding: 0 5px;
							margin-left: 5px;
							line-height: 24px;
							z-index: 5;
						}
					}

					.desc {
						margin-left: 20rpx;
						margin-top: 20rpx;
						@include tx(28rpx);
						color: #373737;
						z-index: 2;
						position: relative;
					}

					.member {
						margin-top: 30rpx;
						padding: 0 20rpx;
						@include tx(24rpx, 45rpx);
						color: rgb(234, 48, 53);
						font-weight: bold;
						text-align: left;
						height: 1rem;
						/*  #ifdef  MP-WEIXIN  */
						// background: #ec7676;
						border-radius: 0 0 16rpx 16rpx;
						/* #endif  */
						/*  #ifndef  MP-WEIXIN  */
						// background: #c7bbbb;
						/* #endif  */
						display: flex;
						justify-content: space-between;

						text {
							color: rgb(219, 91, 43);
						}
					}
				}
			}

			/* #endif  */


			/*  #ifndef  MP-WEIXIN  */
			.recharge_btn {
				margin: 24rpx 30rpx;
				height: 88rpx;
				@include tx(32rpx, 88rpx);
				color: #fff;
				text-align: center;
				border-radius: 16rpx;
				background: #0EADFE;
			}

			/* #endif  */

			.tips {
				padding: 20rpx 0;
				@include tx(28rpx);
				height: auto;
				color: #7B7B7B;
				text-align: center;
				opacity: 1;
				transition: all .4s;
				/* #ifdef MP-KUAISHOU */
				height: 1rem !important;
				padding-bottom: 3rem !important;

				/* #endif */
				margin-top: 1rem;

				@media screen and (max-width: 600px) {
					margin-bottom: 2rem;
				}

				&.hide {
					padding: 0;
					height: 0;
					// opacity: 0;
				}
			}

			.footer {
				padding: 0;
				height: 0;
				opacity: 0;
				transition: all .4s;

				&.show {
					padding: 20rpx 30rpx 32rpx;
					height: auto;
					opacity: 1
				}

				.tit {
					@include tx(28rpx);
					color: #333333;
				}

				.desc {
					margin-top: 28rpx;

					.txt {
						@include tx(24rpx);
						color: #999999;

						&+.txt {
							margin-top: 20rpx;
						}
					}
				}
			}
		}



		.popup_box {
			width: 16rem;
			height: 10rem;
			background: #fff;
			border-radius: 1rem;
			padding: 0.5rem 1rem;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.desc {
				margin-top: 0.4rem;

				.txt {
					font-size: 0.8rem;
					line-height: 1.3rem;
				}
			}
		}
</style>